<template>
  <el-upload
    ref="upload"
    :action="uploadPath"
    :show-file-list="false"
    class="avatar-uploader"
    accept=".jpg,.png"
    :data="{path:path, fileType: 10}"
    :before-upload="beforeUpload"
    :on-success="uploadSuccess"
    :limit="limitCount"
  >
    <div v-if="_value" class="avatar">
      <img :src="_value" class="avatar">
      <div class="del-btn" :class="{hideBtn: !showDel}" @mouseover="showDelBtn" @mouseout="hideDelBtn" @click.stop="">
        <i class="el-icon-delete del-icon" @click.stop="deleteImg" />
      </div>
    </div>
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>
import { uploadPath } from '@/api/upload'

export default {
  name: 'SkuImg',
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      showDel: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadPath,
      path: '/image/',
      limitCount: 1,
      hideUpload: false,
      props: { multiple: true }
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    _value: {
      handler(newValue, oldValue) {
        console.log(newValue)
      }
    }
  },
  methods: {
    showDelBtn() {
      if (!this.showDel) {
        this.showDel = true
      }
    },
    hideDelBtn() {
      if (this.showDel) {
        this.showDel = false
      }
    },
    beforeUpload(file) {
      const isImg = (file.type === 'image/jpeg' || file.type === 'image/png')
      const isSize = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isSize) {
        this.$message.error('上传图片大小不能超过2MB!')
      }
      return isImg && isSize
    },
    uploadSuccess(response, file) {
      const vm = this
      file.imgUrl = response.data.relativePath
      vm._value = file.imgUrl
      vm.$emit('change', vm._value)
      vm.$emit('createTable')
      vm.hideDelBtn()
      vm.$forceUpdate()
    },
    deleteImg() {
      const vm = this
      vm.$refs.upload.clearFiles()
      vm._value = null
      vm.$emit('change', vm._value)
      vm.$emit('createTable')
      vm.hideDelBtn()
      vm.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 24px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    position: relative;
    width: 60px;
    height: 60px;
    display: block;
    overflow: auto;

    .hideBtn {
      opacity: 0;
    }

    .del-btn {
      cursor: default;
      background: rgba(0, 0, 0, 0.4);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .del-icon {
      cursor: pointer;
      font-size: 26px;
      color: #ffffff;
    }
  }
</style>
